<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Login</title>
</head>
<link href="static/css/style.css" rel="stylesheet" type="text/css"/>
<script>
    var __links = document.querySelectorAll('a');

    function __linkClick(e) {
        parent.window.postMessage(this.href, '*');
    };
    for (var i = 0, l = __links.length; i < l; i++) {
        if (__links[i].getAttribute('data-t') == '_blank') {
            __links[i].addEventListener('click', __linkClick, false);
        }
    }

    function myFunction() {
        console.log("Start Login !!!")
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        console.log("username==="+username+"   password=="+password)
        $.ajax({
            url:'/login',//地址
            dataType:'json',//数据类型
            type:'post',//类型
            timeout:2000,//超时
            data:{
                username: username,
                password:password
            },
            //请求成功
            success:function(data,status){
                alert(data);
                alert(status);
            },
            //失败/超时
            error:function(XMLHttpRequest,textStatus,errorThrown){
                if(textStatus==='timeout'){
                    alert('請求超時');
                    setTimeout(function(){
                        alert('重新请求');
                    },2000);
                }
                //alert(errorThrown);
            }
        })

    }
</script>
<script type="text/javascript" src="static/js/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function (c) {
        $('.alert-close').on('click', function (c) {
            $('.message').fadeOut('slow', function (c) {
                $('.message').remove();
            });
        });
    });
</script>
<body>
<!-- contact-form -->
<div class="message warning">
    <div class="inset">
        <div class="login-head">
            <h1>Login Form</h1>
            <div class="alert-close"></div>
        </div>
        <form action="login" method="post">
            <li>
                <input type="text" id="username" name="username" value="admin" onfocus="this.value = 'admin';"
                       onblur="if (this.value == '') {this.value = 'admin';}" class="text"><a href="#"
                                                                                              class=" icon user"></a>
            </li>
            <div class="clear"></div>
            <li>
                <input type="password" id="password" name="password" value="123456" onfocus="this.value = '123456';"
                       onblur="if (this.value == '') {this.value = '123456';}"> <a href="#" class="icon lock"></a>
            </li>
            <div class="clear"></div>
            <div class="submit">
                <input type="submit"  value="Sign in">
                <h4><a href="#">Lost your Password ?</a></h4>
                <div class="clear"></div>
            </div>

        </form>
    </div>
</div>
</div>
<div class="clear"></div>
<!--- footer --->
<div class="footer">
    <p>Copyright &copy; 2018.Focus.com</p>
</div>
</body>
</html>